import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import "./app-visual-slider.less";

/**
 * @description 虚拟表单滑动输入框
 * @export
 * @class AppVisualSlider
 * @extends {Vue}
 */
@Component({})
export class AppVisualSlider extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualSlider
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualSlider
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualSlider
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualSlider
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualSlider
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualSlider
   */
  @Prop() realCompRef!: any;

  /**
   * @description 是否正在拖拽
   * @type {boolean}
   * @memberof AppVisualSlider
   */
  public isDragging: boolean = false;

  /**
   * @description 起始位置
   * @type {*}
   * @memberof AppVisualSlider
   */
  public startPosition: any = {}

  /**
   * @description 范围
   * @type {number}
   * @memberof AppVisualSlider
   */
  public range: number = 0;

  get curRange() {
    if (this.range > this.realCompRef.max) {
      this.range = this.realCompRef.max;
    }
    if (this.range < this.realCompRef.min) {
      this.range = this.realCompRef.min;
    }
    return this.range.toFixed(0);
  }

  /**
   * @description 生命周期
   * @memberof AppVisualSlider
   */
  public created() {
    if (this.realCompRef) {
      this.range = parseInt(this.realCompRef.value);
    }
  }

  /**
   * @description 计算改变值
   * @param {number} value
   * @return {*} 
   * @memberof AppVisualSlider
   */
  public calcChangeValue(value: number) {
    const barWidth = this.position.width - 20;
    return value / (barWidth / 100);
  }

  /**
   * @description 拖拽开始
   * @param {*} event
   * @memberof AppVisualSlider
   */
  public onDragStart(event) {
    this.isDragging = true;
    window.addEventListener('mousemove', this.onDragging);
    window.addEventListener('mouseup', this.onDragEnd);
    this.startPosition = {
      left: event.clientX,
    }
  }

  /**
   * @description 拖拽中
   * @param {*} event
   * @memberof AppVisualSlider
   */
  public onDragging(event: any) {
    if (this.isDragging && this.range >= this.realCompRef.min && this.range <= this.realCompRef.max) {
      this.range += this.calcChangeValue(event.clientX - this.startPosition.left);
      this.startPosition.left = event.clientX;
    }
  }

  /**
   * @description 拖拽结束
   * @memberof AppVisualSlider
   */
  public onDragEnd() {
    this.isDragging = false;
    this.$emit("change", { name: this.name, value: this.curRange });
    window.removeEventListener('mousemove', this.onDragging);
    window.removeEventListener('mouseup', this.onDragEnd);
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualSlider
   */
  public render() {
    return (
      <div
        class={"app-visual-slider luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
        }}
      >
        <div class="visual-slider luckysheet-mousedown-cancel"  style={{ padding: `${(this.position.height - 6) / 2}px 0` }}>
        <div
          class="visual-slider__runway"
          ref="slider"
        >
          <div class="visual-slider__bar" style={{width: `${this.range}%`}}></div>
          <div
            class={{"visual-slider__button-wrapper": true,"luckysheet-mousedown-cancel": true, "dragging" : this.isDragging}}
            onmousedown={(event: any) => {
              this.onDragStart(event);
            }}
            style={{
              height: `${this.position.height}px`,
              width: `${this.position.height}px`,
              left: `${this.range}%`
            }}
          >
            <div class={{"visual-slider__button": true, "luckysheet-mousedown-cancel": true, "dragging" : this.isDragging}}></div>
            <div class={{"visual-slider__tip": true}}>{this.curRange}</div>
          </div>
        </div>
        </div>
      </div>
    );
  }
}
